<template>
  <div
    class="infinite-scroll-list"
    ref="listRef"
    @mouseenter="pauseScroll"
    @mouseleave="resumeScroll"
    :style="{ height: maxHeight + 'px' }"
  >
    <div
      v-for="(item, index) in doubleList"
      :key="index"
      class="infinite-scroll-item">
      <div class="activity-user">
        <div class="activity-first-line">
          <svg-icon name="login" class="user-avatar" />
          <span class="username">{{ item.operatorName }}</span>
        </div>
        <div>
          <span class="activity-time">{{ item.operationTime }}</span>
        </div>
      </div>
      <div class="activity-content">
        <div class="activity-desc"> 下载&nbsp;<a href="#" @click.stop.prevent="emit('docClick', item.fileId)">{{ item.fileName }}</a></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import * as HomeApi from '@/api/home'

const props = defineProps<{
  list: HomeApi.Activity[]
  speed?: number      // 每帧滚动的像素，默认0.35
  maxHeight?: number  // 容器最大高度，默认270
  itemHeight?: number // 单项高度，默认90
}>()

const emit = defineEmits<{
  docClick: [id: string | number]
}>()

const listRef = ref<HTMLElement | null>(null)
const scrollSpeed = props.speed ?? 0.35
const maxHeight = props.maxHeight ?? 270

const doubleList = computed(() => [...props.list, ...props.list])

let rafId: number | null = null

const scroll = () => {
  const el = listRef.value
  if (!el) return
  el.scrollTop += scrollSpeed
  if (el.scrollTop >= (el.scrollHeight / 2)) {
    el.scrollTop = 0
  }
  rafId = requestAnimationFrame(scroll)
}

const pauseScroll = () => {
  if (rafId) cancelAnimationFrame(rafId)
  rafId = null
}
const resumeScroll = () => {
  if (!rafId) rafId = requestAnimationFrame(scroll)
}

onMounted(() => {
  if (listRef.value) listRef.value.scrollTop = 0
  resumeScroll()
})
onUnmounted(() => {
  pauseScroll()
})
watch(() => props.list, () => {
  if (listRef.value) listRef.value.scrollTop = 0
})
</script>

<style scoped>
.activity-user {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  gap: 10px;
}

.activity-first-line{
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-evenly;
}

.user-avatar {
  width: 24px;
  height: 24px;
}

.username {
  font-size: 14px;
  color: #333;
}

.activity-desc :deep() a{
  text-decoration-line: none !important;
}

.activity-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

.activity-desc {
  font-size: 14px;
  color: #666;
  width: 85%;
  text-align: left;
  line-height: 25px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.activity-desc a {
  overflow: hidden;
  color: #3580e6;
  height: 40px;
}

.infinite-scroll-list {
  overflow-y: hidden;
  position: relative;
  width: 100%;
  padding: 0 5px;
}
.infinite-scroll-item {
  min-height: 90px;
  height: 90px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0;
  background: #fff;
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.infinite-scroll-item a {
  cursor: pointer;
}
</style>
